<template>
  <Layout>
    <div class="content">
      <div class="top-content">
        <div class="ads">
          <i class="iconfont">&#xe640;</i
          >&nbsp;&nbsp;山东省济南市自贸区鲁商凤凰广场汉码...
          <i class="iconfont" id="icon2">&#xe614;</i>
        </div>
        <input type="text" name="" id="" placeholder="汉码商城会员优惠卷" />
        <img src="../assets/imgs/home/搜索.png" alt="" class="search" />
        <img src="../assets/imgs/home/banner.png" alt="" class="banner" />
        <ul class="list">
          <li v-for="item in imgs" :key="item.id">
            <img :src="item.url" alt="" />
            <span>{{ item.title }}</span>
          </li>
        </ul>
      </div>
      <div class="bottom-content">
        <h3>附近店铺</h3>
        <template v-for="shop in shopList" :key="shop._id" class="overflow">
          <router-link :to="`/Shop/${shop.id}`">
            <div>
              <ShopItem :shop="shop"></ShopItem>
            </div>
          </router-link>
        </template>
      </div>
    </div>
  </Layout>
</template>

<script setup>
import Layout from "@/components/Layout.vue";
import { reactive, ref } from "vue";
import ShopItem from "@/components/ShopItem.vue";
import request from "@/utils/request";
import {useShopStore} from '../stores'
let imgs = reactive([
  { id: "01", url: "/src/assets/imgs/home/超市.png", title: "超市便利" },
  { id: "02", url: "/src/assets/imgs/home/菜市场.png", title: "生鲜蔬菜" },
  { id: "03", url: "/src/assets/imgs/home/品牌.png", title: "品牌免运" },
  { id: "04", url: "/src/assets/imgs/home/优惠.png", title: "红包优惠" },
  { id: "05", url: "/src/assets/imgs/home/水果店.png", title: "水果零食" },
  { id: "06", url: "/src/assets/imgs/home/鲜花绿植.png", title: "鲜花绿植" },
  { id: "07", url: "/src/assets/imgs/home/医药.png", title: "医疗健康" },
  { id: "08", url: "/src/assets/imgs/home/家居.png", title: "服装时尚" },
  { id: "09", url: "/src/assets/imgs/home/烘培.png", title: "烘培蛋糕" },
  { id: "10", url: "/src/assets/imgs/home/签到.png", title: "签到" },
]);
const shopStore = useShopStore()
const {shops} = shopStore
let shopList = ref([]);
// 获取所有店铺信息
const getShopList = async () => {
  let result = await request.get("/api/v1/hotShops", { state: 1 });
  if (result.msg == "ok") {
    shopList.value = result.data;
     shopList.value.forEach(shop => {
      shops[shop.id] = shop.title
     });
  }
};
getShopList();
</script>

<style lang="scss" scoped>
@font-face {
  font-family: "iconfont";
  src: url("../assets/icons/iconfont.woff2?t=1722835924500") format("woff2"),
    url("../assets/icons/iconfont.woff?t=1722835924500") format("woff"),
    url("../assets/icons/iconfont.ttf?t=1722835924500") format("truetype");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 20px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.content {
  background-color: #f1f1f1;
  max-width: 1024px;
  height: 100%;
  .top-content {
    height: 362px;
    padding: 10px 20px;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .ads {
      font-size: 14px;
      color: #333333;
      position: relative;
      #icon2 {
        position: absolute;
        right: 0;
      }
    }
    input {
      width: 100%;
      height: 30px;
      background-color: #f5f5f5;
      border: none;
      margin-top: 10px;
      border-radius: 5px;
      padding-left: 35px;
    }
    .banner {
      width: 100%;
      height: 86px;
      margin-top: 21px;
    }
    .list {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: space-evenly;
      width: 100%;
      > li {
        display: flex;
        flex-direction: column;
        padding: 5px;
        margin-top: 8px;
        justify-content: center;
        align-items: center;
        > img {
          width: 40px;
          height: 40px;
        }
        > span {
          font-size: 12px;
          margin-top: 7px;
        }
      }
    }
  }
  .bottom-content {
    height: 250px;
    overflow: auto;
    padding: 10px 20px;
    margin-top: 10px;
    background-color: white;
    display: flex;
    flex-direction: column;
  }
  .search {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    margin-top: -25px;
  }
  h3 {
    margin: 0 0;
  }
}
</style>
